import { localStore } from '@/utils/sessionStore'
import { get, isNil, toNumber } from 'lodash'
const globalConfig = localStore.get('globalConfig')
export async function loadRemoteComponent(config) {
  return loadScript(config)
}

function loadScript(config) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = config.url
    script.type = 'text/javascript'
    script.async = true
    script.onload = () => {
      console.log(`Dynamic Script Loaded: ${config.url}`)
      document.head.removeChild(script)
      resolve()
    }
    script.onerror = () => {
      console.error(`Dynamic Script Error: ${config.url}`)
      document.head.removeChild(script)
      reject()
    }
    document.head.appendChild(script)
  })
}

export function loadRoute3Path(path) {
	let url = path
	if (isRoute3Path()) {
     const splitNum = getRoutePathSplitNum() + 1
	   url = `${window.location.pathname.split('/').slice(0, splitNum).join('/')}${url || ''}`.replace('//', '/')
	}
	return url
}

function isRoute3Path() {
  const route3 = get(globalConfig, 'route3', false)
  return typeof route3 === 'string' ? JSON.parse(route3) : route3
}

function getRoutePathSplitNum() {
	const num = get(globalConfig, 'routePathSplitNum', 3)
	return isNil(num) ?  3 : toNumber(num)
}

// iframe打开页面
// 创建一个全屏div
let createFullScreenDivEle = function () {
  let fsd = document.createElement("div");
  fsd.id = "hpFrameDiv";
  fsd.style.position = "fixed";
  fsd.style.display = "none";
  // fsd.style.display = "block";
  // fsd.style.visibility = "hidden";
  fsd.style.left = "5%";
  fsd.style.top = "5%";
  fsd.style.width = "90%";
  fsd.style.height = "90%";
  fsd.style.zIndex = "1000";
  fsd.style.border = "1px solid #ddd";
  fsd.style.background = "#ffffff";
  return fsd;
};
// 创建一个iframe
let createIframeEle = function (url) {
  let iframe = document.createElement("iframe");
  iframe.id = "hpIframe";
  iframe.style.left = "0";
  iframe.style.width = "100%";
  iframe.style.height = "100%";
  iframe.style.border = "none";
  iframe.style.background = "#ffffff";
  iframe.src = url; // 设置iframe的源地址
  return iframe;
};
// 创建一个关闭按钮
let createCloseButtonEle = function () {
  let btn = document.createElement("button");
  btn.innerHTML = "X";
  btn.style.position = "absolute";
  btn.style.top = "0";
  btn.style.right = "0";
  btn.style.backgroundColor = "transparent";
  btn.style.border = "none";
  btn.style.color = "#ccc";
  btn.style.fontSize = "20px";
  btn.style.cursor = "pointer";
  btn.style.paddingLeft = "15px";
  btn.style.width = "40px";
  btn.style.height = "40px";
  btn.style.borderBottomLeftRadius = "100%";
  return btn;
};

// url 是afc地址, createIframe 要在系统加载时调用
export function createIframe(url) {
  // hpFrameDiv 已存在,无需创建
  let hpFrameDiv = document.getElementById("hpFrameDiv")
  if(hpFrameDiv) return

  let fullScreenDiv = createFullScreenDivEle();
  document.body.appendChild(fullScreenDiv);
  let iframe = createIframeEle(url);
  fullScreenDiv.appendChild(iframe);
  let closeButton = createCloseButtonEle();
  fullScreenDiv.appendChild(closeButton);

  // 点击关闭按钮时隐藏iframe
  closeButton.addEventListener("click", function () {
    fullScreenDiv.style.display = "none";
    setTimeout(function() {
      iframe.src = url // 切回创建iframe初始地址,避免白屏
    }, 50)
  });
};

// 打开流程表单时调用这个方法
export function openIframe(url) {
  let hpIframe = document.getElementById("hpIframe");
  let hpFrameDiv = document.getElementById("hpFrameDiv");
  hpFrameDiv.style.display = "block";
  setTimeout(function() {
    hpIframe.src = url;
  }, 50)
};
